{extend name="common:base" /}
{block name="page_current"}
<div class="fui-page-group statusbar">
    <link rel="stylesheet" type="text/css" href="__STATIC__/m/css/quick.css?v=1537341861">
    <style type="text/css">
        .fui-goods-tab .menu .nav {
            border-left: 2px solid transparent;
        }
        .fui-goods-tab .menu .nav.active {
            border-left: 2px solid #ff5555;
            boder-bottom: none;
        }
        .fui-goods-tab.style3 .menu .nav.active:before {
            display: none;
        }
        /*.fui-page, .fui-page-group{*/
        /*height: 100%;*/
        /*}*/
        #title {
            padding: 0.4rem 0;
            display: block;
        }
        .quick-list .quick-item .info .buyline .buy .icon {
            font-size: 1rem;
            vertical-align: middle;
            line-height: 1rem;
        }
        .quick-num .minus, .quick-num .plus {
            height: 1rem;
            width: 1rem;
        }
        .fui-fullHigh-item.menu {
            width: 4.6rem;
            padding-bottom:1rem;
        }
        .quick-list .quick-item .thumb img,.quick-list .quick-item .thumb {
            width: 4rem;
            height: 4rem;
        }
        .quick-list .quick-item .info .sales {
            padding: 0.34rem 0;
        }
        .quick-list .quick-item .info .buyline {
            padding-top: 0.6rem;
        }
        .fui-swipe-bullet {
            margin: 0 4px;
        }
        .quick-num{color:#F00;}
    </style>
    <style type="text/css">
        .fui-footer.quick {background: #474749;}
        .fui-footer.quick .quick-cart .inner {color: #ffffff; background: #ff5555; border-color: #474749;}
        .fui-footer.quick .quick-info {color: #ffffff;}
        .fui-footer.quick .quick-submit {color: #ffffff; background: #ff9d55;}
        .fui-fullHigh-item.menu nav {color: #666666; background: #f8f8f8;}
        .fui-fullHigh-item.menu nav:active {background: #f8f8f8;}
        .fui-fullHigh-item.menu nav.on {color: #ff5555; background: #ffffff;}
        .fui-fullHigh-item.menu nav.on:before {border-color: #ff5555;}
        .quick-list-title {color: #666666; background: #f8f8f8;}
        .quick-list-title:before {border-color: #efefef;}
        .quick-list .quick-item .info .title {color: #333333;}
        .quick-list .quick-item .info .subtitle {color: ;}
        .quick-list .quick-item .info .sales {color: #888888;}
        .fui-footer.cart .inner .item .price,
        .quick-list .quick-item .info .buyline .price {color: #ff6500;}
        .quick-num .plus,
        .fly-dot {background: #ff5555;}
        .quick-num .minus {border-color: #ff5555; color: #ff5555;}
        .fui-footer.cart .title:before {border-color: #ff5555;}
        .fui-footer.quick .quick-cart .dot,.mask{display:block;}
        .quick-num.close .icon-minus {
            animation: closeminus 0.2s;
            animation-fill-mode: forwards;
        }
    </style>
    <style>
        .fui-cell-group{width:100%;}
        .fullback-title{color:#999999;font-size:0.7rem;padding:0.75rem 0 0.5rem 0;}
        .fullback-info{}
        .fullback-info p{height:1rem;line-height: 1rem;font-size:0.625rem;color:#333;display: inline-block;padding:0 0.5rem 0 0;}
        .fullback-info p i{border:none;height:0.75rem;width:0.75rem;display: inline-block;background: #ff4753;color:#fff;font-size:0.4rem;line-height: 0.8rem;text-align: center;
            font-style: normal;border-radius: 0.75rem;-webkit-border-radius: 0.75rem;margin-right:0.25rem;}
        .fullback-remark{line-height: 1rem;font-size:0.6rem;color:#666;padding:0.2rem 0;}
        .fui-mask-picker{
            position: fixed;
            background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
            width: 100%;
            height: 100%;
            left: 0;
            opacity: 0;
            top: 0;
            z-index: 1000;
            -moz-transition-duration: 400ms;
            -webkit-transition-duration: 400ms;
            transition-duration: 400ms;
        }
        .fui-mask-picker.visible{opacity:1;}
        .quick-num .icon-plus.disabled {
            color:#dadada;
        }
    </style>
    <div class="fui-page fui-page-current" id="app">
        <div class="fui-header">
            <div class="fui-header-left">
                <a class="back"></a>
            </div>
            <div class="title">测试的</div>
            <div class="fui-header-right">
                <a href="{:url('Order/index')}" class="external">
                    <i class="icon icon-person2"></i>
                </a>
            </div>
        </div>
        <div class="fui-content navbar quick">
            <div class="shop-header">
                sadflasjdfklj
            </div>
            <div class="fui-fullHigh-group">
                <div class="fui-fullHigh-item menu" id="tab">
                    <nav :data-index="index" :class="[nav_selected == index ? 'on':'']" v-for="(nav, index) in navs" @click="changeNav(index)">{{ nav.text }}</nav>
                </div>
                <div class="fui-fullHigh-item container" style="position: relative">
                    <div class="quick-list">
                        <div id="list">

                            <div class="quick-item" :data-index="index" v-for="(goods, index) in now_goods">
                                <div class="thumb" data-nocache="true" @click="goGoodsDetail(goods.id)">
                                    <img :src="goods.thumb">
                                </div>
                                <div class="info">
                                    <a class="title" :href="goods.detail_url" @click="goGoodsDetail(goods.id)" data-nocache="true">{{ goods.goods_name }}</a>
                                    <a class="subtitle" :href="goods.detail_url" data-nocache="true"></a>
                                    <div class="sales">库存 {{ goods.total }}</div>
                                    <div class="buyline">
                                        <div class="price">￥{{ goods.minprice }}</div>
                                        <div class="buy">
                                            <div :class="['quick-num',( getGoodsTotal(goods.id) > 0 ? 'open' : 'close' )]">
                                                <div class="icon icon-minus" @click="listItemMinus(goods)"></div>
                                                <div class="num">{{ getGoodsTotal(goods.id) }}</div>
                                                <div :class="['icon icon-plus',(listItemHasPlus(goods) == false ? 'disabled' : '')]" @click="listItemPlus(goods,index)" ref="box"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部菜单 -->
        <div class="fui-footer quick">
            <div :class="['quick-cart',(isEmptyCart ? 'empty':'')]" id="quick-cart-btn" @click="showCart">
                <div class="dot" v-show="carts.length > 0">{{ carts.length }}</div>
                <div class="inner">
                    <i class="icon icon-quick-cart"></i>
                </div>
            </div>
            <div class="quick-info">
                <p class="price" id="cart-price">￥{{ totalPrice }}</p>
                <p v-show="isEmptyCart">当前购物车为空</p>
                <p v-show="!isEmptyCart">选好商品点击去结算</p>
            </div>
            <div :class="['quick-submit',(isEmptyCart ? 'disabled':'')]" id="btn-submit" style="margin: 0" @click="checkOut">去结算</div>
        </div>
        <!-- 购物车展开 -->
        <div :class="['fui-footer','cart',(isCartShow ? 'in':'out')]" id="quick-cart">
            <div class="title">
                <div class="text">购物车</div>
                <div class="right" id="btn-clear" @click="claerCart"><i class="icon icon-delete"></i> 清空</div>
            </div>
            <div class="inner">
                <div class="item" v-for="(cart, index) in carts">
                    <div class="text">
                        <p>{{ cart.goods_name }}</p>
                        <p class="spec" v-if="!cartItemSpecsIsDefault(cart)">{{ cart.option_title }}</p>
                    </div>
                    <div class="price">￥{{ cart.goods_price }}</div>
                    <div class="num">
                        <div class="quick-num open">
                            <div class="icon icon-minus" @click="cartItemMinus(cart)"></div>
                            <div class="num">{{ cart.total }}</div>
                            <div :class="['icon icon-plus',(cart.max_total <= cart.total ? 'disabled' : '')]" @click="cartItemPlus(cart)"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tip">Tip: 加入购物车后请尽快下单哦~</div>
        </div>
        <div class="mask mask-cart" v-show="isCartShow" @click="closeCart"></div>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
    <script src="__STATIC__/js/jquery.fly.js"></script>
    {include file="goods/picker" /}
    <script>
        var baseGoodsDetailUrl = "{:url('m/Goods/detail')}";
        var navs = {$categoryListJson|raw};
    </script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                isCartShow:false
                ,clickIndex:-1
                ,nav_selected:0
                ,navs:navs
                ,now_goods:[]
                ,goodsCache:{}  // 商品详情缓存
                ,carts:[]
            }
            ,
            methods:{
                // 转到 商品 详情
                goGoodsDetail:function (_goodsId) {
                    $.router.load(baseGoodsDetailUrl + '?id=' + _goodsId,true);
                }
                ,
                // 获取商品列表
                getGoodsList:function () {
                    var _that = this;

                    var navId = _that.navs[_that.nav_selected].id;
                    core.json("{:url('Goods/index')}",{p:1,c:navId},function (json) {
                        if(json.code){
                            // pageMore = json.data.has_more;
                            // 需要进行数据处理
                            _that.now_goods = json.data.list;
                        }
                    },false,false);
                }
                ,
                // 获取购物车列表
                getCartList:function () {
                    var _that = this;

                    core.json("{:url('Member/cart')}",{},function (json) {
                        if(json.code){
                            // 需要进行数据处理
                            Vue.set(_that,'carts',json.data);
                        }
                    },false,false);
                }
                ,
                // 显示 购物车
                showCart:function () {
                    if(this.isEmptyCart){
                        return false;
                    }
                    this.isCartShow = true;
                }
                ,
                // 关闭 购物车
                closeCart:function () {
                    this.isCartShow = false;
                }
                ,
                // 左边导航栏更改
                changeNav:function (_index) {
                    var _that = this;

                    if(_that.nav_selected != _index){
                        _that.nav_selected = _index;
                        _that.getGoodsList();
                    }
                }
                ,
                // 商品列表 减
                listItemMinus:function (_goods) {
                    if(_goods.has_option){
                        FoxUI.toast.show('多规格商品请到购物车内删除')
                        return false;
                    }
                    var _that = this;

                    for (var i = 0; i < _that.carts.length; i++) {
                        if(_goods.id == _that.carts[i].goods_id){
                            _that.cartItemMinus(_that.carts[i])
                        }
                    }
                }
                ,
                // 商品列表 加
                listItemPlus:function (_goods,_index) {
                    console.log('listItemPlus');
                    var _that = this;

                    FoxUI.loader.show('mini');
                    if(_that.goodsCache[_goods.id]){
                        _that.handleQuickGoodsDetail(_that,_index,_that.goodsCache[_goods.id]);
                    }
                    else{
                        // 获取商品详情
                        core.json("{:url('quick_goods_detail')}",{id:_goods.id},function (json) {
                            console.log(json)
                            if(json.code){
                                //  商品 缓存
                                _that.goodsCache[_goods.id] = json.data;

                                _that.handleQuickGoodsDetail(_that,_index,json.data);
                            }
                            else{
                                FoxUI.alert(json.msg)
                            }
                        },false,false);
                    }
                }
                ,
                // 商品列表中，判断是否可以增加，多规格商品不判断
                listItemHasPlus:function (_goods) {
                    if(_goods.total < 1){
                        return false;
                    }
                    if(_goods.has_option){
                        return true;
                    }
                    var cartModel;
                    for (var i = 0; i < app.carts.length; i++) {
                        if(app.carts[i].goods_id == _goods.id){
                            cartModel = app.carts[i];
                        }
                    }

                    if(cartModel && cartModel.total >= cartModel.max_total){
                        return false;
                    }

                    return true;
                }
                ,
                // 购物车 减
                cartItemMinus:function (_cart) {
                    var _that = this;

                    if(_cart.total > 1){
                        _cart.total--;

                        FoxUI.loader.show('mini');
                        $.ajax({
                            url: "{:url('m/Goods/minus_goods_to_cart')}",
                            data:{id:_cart.cart_id},
                            success: function(json) {
                                FoxUI.loader.hide();
                                console.log(json)
                                if('function' == typeof _cbFn){
                                    _cbFn();
                                }
                            }
                        });
                    }
                    else{
                        FoxUI.loader.show('mini');
                        // 小于 0 ，删除本项
                        delGoodsToCart(_cart.cart_id,function () {
                            FoxUI.loader.hide();
                            // 刷新购物车
                            _that.getCartList();
                        })
                    }
                }
                ,
                // 购物车 增加
                cartItemPlus:function (_cart) {
                    var _that = this;
                    // _cart.total++;
                    if(_cart.total >= _cart.max_total){
                        if(_cart.max_total < 1){
                            FoxUI.toast.show('超出最高购买数量')
                        }
                        else{
                            FoxUI.toast.show('最多购买'+_cart.max_total+'件')
                        }
                        return false;
                    }
                    FoxUI.loader.show('mini');
                    _that.addToCart(-1,_cart.goods_id,_cart.option_id,1);
                }
                ,
                // 清空购物车
                claerCart:function () {
                    var _that = this;
                    FoxUI.confirm('确认要清空购物车吗？',function () {
                        Vue.set(_that,'carts',[]);
                        _that.closeCart();
                    })
                }
                ,
                // 显示小球飞入
                showFly:function (_dom) {
                    var offset = $('#quick-cart-btn').offset();
                    var dot = $('<i class="fly-dot"></i>');
                    dot.fly({
                        speed: 1.5,
                        start: {left: _dom.getBoundingClientRect().left - 5, top: _dom.getBoundingClientRect().top - 14},
                        end: {left: offset.left + 30, top: offset.top - 5},
                        onEnd: function () {
                            dot.remove()
                        }
                    })
                }
                ,
                // 显示商品列表里面的数量
                getGoodsTotal:function (_goodsId) {
                    var _that = this;

                    var total = 0;
                    for (var i = 0; i < _that.carts.length; i++) {
                        if(_goodsId == _that.carts[i].goods_id){
                            total += _that.carts[i].total;
                        }
                    }

                    return total;
                }
                ,
                addToCart:function (_itemIndex,_goodsId,_goodsOptionId,_total) {
                    var _that = this;

                    addGoodsToCart(_goodsId,_goodsOptionId,_total,function (json) {
                        FoxUI.loader.hide();

                        if(!json.code){
                            FoxUI.toast.show(json.msg)
                            return false;
                        }
                        // 刷新购物车
                        _that.getCartList();

                        if(_itemIndex > -1){
                            var doms = _that.$refs.box;
                            _that.showFly(doms[_itemIndex]);
                        }
                    })
                }
                ,
                checkOut:function () {
                    if(this.isEmptyCart){
                        return false;
                    }

                    console.log('结算')
                    var _that = this;
                    var cartIds = [];
                    var totals = [];
                    for (var i = 0; i < _that.carts.length; i++) {
                        cartIds.push(_that.carts[i].cart_id);
                        totals.push(_that.carts[i].total);
                    }

                    location.href = "{:url('m/Order/create')}?cart_ids=" + cartIds.join(',') + '&total=' + totals.join(',');
                }
                ,
                cartItemSpecsIsDefault:function (_cart) {
                    return '-----' == _cart.option_specs;
                }
                ,
                // 商品增加时 ajax 后续处理
                handleQuickGoodsDetail:function (_that,_index,goodsModel) {
                    // 判断，如果是多个规格弹出选择框
                    if(goodsModel.options.length < 1){
                        FoxUI.loader.hide();
                        FoxUI.alert('读取商品规格错误')
                    }
                    else{
                        if(!goodsModel.has_option){
                            // 默认 即 单规格
                            console.log('单规格')
                            // 先判断是否没库存了
                            if(goodsModel.options[0].stock < 1){
                                FoxUI.loader.hide();
                                FoxUI.toast.show('超出最高购买数量')
                                return;
                            }

                            var jieguo = _that.hasAddCartText(goodsModel.options[0]);
                            if(jieguo.length){
                                FoxUI.loader.hide();
                                FoxUI.toast.show(jieguo)
                                return false;
                            }

                            _that.addToCart(_index,goodsModel.id,goodsModel.options[0].id,1);
                        }
                        else{
                            var thumbs = goodsModel.thumbs.split(',');
                            // 多规格，打开规格选择框
                            vuePicker.init({
                                data:{
                                    goods:{
                                        id:goodsModel.id
                                        ,minPrice:goodsModel.min_price
                                        ,maxPrice : goodsModel.max_price
                                        ,thumb : thumbs[0]
                                    }
                                    ,specs : goodsModel.specs
                                    ,options : goodsModel.options
                                }
                            })
                            FoxUI.loader.hide();
                            vuePicker.openPicker('cart')
                            _that.clickIndex = _index;
                        }
                    }
                }
                ,
                // 是否能添加，主要判断加入购物车时是否超过最大允许数量
                hasAddCart:function (_optionModel) {
                    if(_optionModel.stock < 1){
                        // FoxUI.loader.hide();
                        // FoxUI.toast.show('超出最高购买数量')
                        return -2;
                    }

                    // 取出购物车里面对应
                    var cartModel;
                    for (var i = 0; i < app.carts.length; i++) {
                        if(app.carts[i].option_id == _optionModel.id){
                            cartModel = app.carts[i];
                        }
                    }

                    if(cartModel && cartModel.total >= cartModel.max_total){
                        // FoxUI.toast.show('最多购买'+cartModel.max_total+'件')
                        return -1;
                    }

                    // 购物车里面 没有，可以加入
                    return 1;
                }
                ,
                // 是否能添加，主要判断加入购物车时是否超过最大允许数量  返回文本，空文本为成功
                hasAddCartText:function (_optionModel) {
                    var jieguo = this.hasAddCart(_optionModel);
                    if(jieguo < 1){
                        var text = '';
                        switch (jieguo) {
                            case -2:
                                text = '超出最高购买数量';
                                break;
                            case -1:
                            default:
                                text = '最多购买' + _optionModel.stock + '件';
                                break;
                        }
                        return text;
                    }

                    return '';
                }
            }
            ,
            computed:{
                totalPrice:function () {
                    var _that = this;
                    var total = 0;
                    for (var i = 0; i < _that.carts.length; i++) {
                        total += _that.carts[i].goods_price * _that.carts[i].total;
                    }

                    return total;
                }
                ,
                // 购物车是否为空  true 空 ；
                isEmptyCart:function () {
                    return this.carts.length < 1;
                }
            }
        })
        function addGoodsToCart(_goodsId,_optionId, _total,_cbFn) {
            // FoxUI.loader.show('mini');
            $.ajax({
                url: "{:url('m/Goods/add_goods_to_cart')}",
                data:{id:_goodsId,option_id:_optionId,total:_total},
                success: function(json) {
                    console.log(json)
                    if('function' == typeof _cbFn){
                        _cbFn(json);
                    }
                }
            });
        }
        function delGoodsToCart(_cartId,_cbFn) {
            $.ajax({
                url: "{:url('m/Goods/del_goods_to_cart')}",
                data:{cart_ids:_cartId},
                success: function(json) {
                    console.log(json)
                    if('function' == typeof _cbFn){
                        _cbFn();
                    }
                }
            });
        }
        function pickerCallBack(_goodsId, _optionId, _total, _type) {
            if ('cart' == _type) {
                var goodsModel = app.goodsCache[_goodsId];
                if(!goodsModel){
                    FoxUI.toast.show('获取商品信息出错')
                    return false;
                }

                // 找到规格model
                var optionModel;
                for (var i = 0; i < goodsModel.options.length; i++) {
                    if(goodsModel.options[i].id == _optionId){
                        optionModel = goodsModel.options[i];
                    }
                }
                if(!optionModel){
                    FoxUI.toast.show('获取商品规格出错')
                    return false;
                }

                var jieguo = app.hasAddCartText(optionModel);
                if(jieguo.length){
                    FoxUI.loader.hide();
                    FoxUI.toast.show(jieguo)
                    return false;
                }

                addGoodsToCart(_goodsId,_optionId,_total,function (json) {
                    FoxUI.loader.hide();

                    if(!json.code){
                        FoxUI.toast.show(json.msg)
                        return false;
                    }

                    app.getCartList();
                    var doms = app.$refs.box;
                    app.showFly(doms[app.clickIndex]);
                });
            }
        }
    </script>
    <script>
        $(function () {
            app.getGoodsList();
            app.getCartList();
        })
    </script>
</div>
{/block}
